<script lang="ts" setup>
import { useBeforeDate } from 'co-utils-vue';
import { ElMessageBox } from 'element-plus';
import { computed, PropType, ref } from 'vue';

import { deleteCommentItem } from '@/api/comment';
import { ICommentList } from '@/api/comment/type';

import { useEmojiTransform } from './index';

defineOptions({
  name: 'SubReply'
});
const props = defineProps({
  data: {
    type: Object as PropType<ICommentList.SubComment>,
    default: () => {
    }
  }
});
const subCommentRef = ref<HTMLDivElement | null>(null);
const emits = defineEmits<{(event: 'on-click-comment', index: number, item: ICommentList.SubCommentList): void;
  (event: 'on-delete-comment'): void;
}>();
const dataComputed = computed(() => props.data?.list);
const handleDeleteComment = async (p: {
  subCommentId: number;
}) => {
  await ElMessageBox.confirm('是否删除评论？', '提示', {
    type: 'warning',
    showClose: false,
    draggable: true,
    showCancelButton: false,
    closeOnClickModal: false,
    cancelButtonText: '取消',
    confirmButtonText: '确定'
  });
  await deleteCommentItem(p);
  emits('on-delete-comment');
};
</script>

<template>
  <div
    ref="subCommentRef"
    class="sub-comment-list"
  >
    <div
      v-for="(item, index) in dataComputed"
      :key="item"
      class="sub-comment-item"
    >
      <div class="popover-box user-popover cz-popover">
        <a class="user-link">
          <div class="avatar cz-avatar avatar">
            <img
              :alt="item.userInfo.username"
              :src="item.userInfo.avatar"
              class="lazy avatar-img"
              loading="lazy"
            >
          </div>
        </a>
      </div>
      <div class="content-box">
        <div class="comment-main">
          <div class="user-box">
            <div class="popover-box user-popover">
              <a class="username username">
                <span
                  class="name"
                  style="max-width: 128px;position: relative"
                >
                  {{ item.userInfo.username }}{{ (item.isPublisher === 1) ? '（我）' : "" }}
                </span>
              </a>
            </div>
            <div
              v-if="item.replyId && item.replyInfo"
              class="rely-box"
            >
              <span>回复</span>
              <div class="popover-box user-popover">
                <a
                  class="replied-name"
                  style="max-width: 10em;"
                >
                  <span style="position: relative">
                    {{ item.replyInfo.userInfo.username }}{{ (item.replyInfo.isPublisher === 1) ? '（我）' : "" }}
                  </span>
                </a>
              </div>
            </div>
            <time
              :datetime="item.createDate"
              :title="item.createDate"
              class="time"
            >
              {{ useBeforeDate(item.createDate) }}
            </time>
          </div>
          <div
            class="content"
            v-html="useEmojiTransform(item?.content || '')"
          />
          <div
            v-if="item.replyId && item.replyInfo"
            class="parent-wrapper"
          >
            <div>
              “
            </div>
            <div class="parent-content">
              {{ item.replyInfo?.content }}
            </div>
            <div>”</div>
          </div>
          <div class="action-box">
            <div class="action-left">
              <div class="item dig-item">
                <cz-svg
                  class="cz-mr-1"
                  name="like"
                />
                点赞
              </div>
              <div
                v-if="item.isPublisher!==1"
                class="item"
                @click="()=>emits('on-click-comment', index, item)"
              >
                <cz-svg
                  class="cz-mr-1"
                  name="reply"
                />
                回复
              </div>
              <div
                v-if="item.isPublisher===1"
                class="hidden item-delete cursor-pointer color-[#f56C6C]"
                @click="handleDeleteComment({subCommentId: item.subCommentId})"
              >
                <cz-svg
                  class="cz-mr-1"
                  name="delete"
                />
                删除
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "sub-reply.scss";
</style>
